"use client";

import { useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";

const teachers = [
  {
    name: "伊 专 主讲授",
    title: "知名税务专家、原国家税务总局干部学院副院长 ",
    title2: "第一章 网络主播涉税政策解读",
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624439617.jpg",
    expertise: ["税收政策", "税务培训", "征管实务", "风险防范"],
    courses: [
      { title: "第一节 网络主播经营主体类型", link: "/course/2" },
      { title: "（一）网络主播类型", link: "/course/3" },
      { title: "（二）应区分的涉税主体概念", link: "/course/3" },
      { title: "（三）注册登记类型与经营模式", link: "/course/3" },
      { title: "1.个人独立主播模式", link: "/course/3" },
      { title: "2.主播个人与经纪公司签约模式", link: "/course/3" },
      { title: "3.主播个人与直播平台签约模式", link: "/course/3" },
      { title: "4.主播个人与电商合作模式", link: "/course/3" },
      { title: "5.主播个人自建工作室模式", link: "/course/3" },
      { title: "6.主播个人注册个体工商户模式", link: "/course/3" },
      { title: "7.主播个人注册独资企业模式", link: "/course/3" },
      { title: "8.主播个人注册合伙企业模式", link: "/course/3" },
      { title: "9.主播个人注册股份责任公司模式", link: "/course/3" },
    ],
    courses1: [
      { title: "第二节 网络主播的收入与纳税税种", link: "/course/3" },
      { title: "（一）网络主播收人的类型", link: "/course/3" },
      { title: "（二）网络主播涉及税种介绍", link: "/course/3" },
      { title: "（三）各类主体计税方法", link: "/course/3" },
      { title: "第三节 网络主播的税收优惠", link: "/course/2" },
      { title: "（一）政策优惠", link: "/course/3" },
      { title: "（二）地域及地区园区优惠", link: "/course/3" },
      { title: "第四节 网络主播涉税发票的管理", link: "/course/3" },
      { title: "（一）发票的申请", link: "/course/3" },
      { title: "（二）发票的取得与抵扣入账", link: "/course/3" },
      { title: "（三）发票的开具", link: "/course/3" },
      { title: "（四）发票的违规与处罚", link: "/course/3" },
    ],
    courses2: [
      { title: "第五节 网络主播税收征收管理", link: "/course/3" },
      { title: "（一）申报纳税 ", link: "/course/3" },
      { title: "（二）逾期申报纳税处罚", link: "/course/3" },
      { title: "（三）变更、注销涉及的税收问题", link: "/course/3" },
      { title: "（四）滞纳金、补税与处罚", link: "/course/3" },
      { title: "第六节《网络直播行业税收检查指引》解析", link: "/course/3" },
    ],
  },
  {
    name: "蔡 昌 主讲",
    title: "著名税务风控专家、中央财经大学税收筹划与法律研究中心主任、教授、博士生导师",
    title2:'第二章 ，第三章  ',
    image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624499173.jpg",
    expertise: ["税务风控", "税务筹划", "税务会计", "税收法律"],
    courses: [
      { title: "第二章 国家税务总局“智慧税务”对互联网和相关服务业的智能监管", link: "/course/1" },
      { title: "第一节 互联网和相关服务业的定义/主要领域/行业特点", link: "/course/2" },
      { title: "第二节 网络主播在互联网和相关服务业中的重要地位", link: "/course/3" },
      { title: "第三节  “智慧税务”对互联网和相关服务业智能监管要点", link: "/course/4" },
      { title: "（一）监管方法", link: "/course/5" },
      { title: "（二）监管要点", link: "/course/6" },
      { title: "1.电商企业未足额确认增值税销售收入风险", link: "/course/7" },
      { title: "2.不符政策的进项未转出风险", link: "/course/2" },
      { title: "3.年末收入变动异常", link: "/course/3" },
      { title: "4.未按规定办理市场主体登记", link: "/course/4" },
      { title: "5.零售业增值税未开票销售额占比过低", link: "/course/5" },
      { title: "6.主营业务收入类型为货物但服务收入占比过高", link: "/course/6" },
      { title: "7.法人或自然人投资人任职II类风险企业主要人员", link: "/course/7" },
      { title: "8.同一法人代表名下多家企业存在交易往来", link: "/course/5" },
      { title: "9.进项发票未开具销项发票", link: "/course/6" },
      { title: "10.商务服务业工资薪金支出与成本费用总额占比偏低", link: "/course/7" },
      { title: "（三）网络主播及其经纪公司应对方法", link: "/course/7" },
    ],
    courses1: [
      { title: "第三章  国家税务总局“智慧税务”对网络主播涉税的智能监管", link: "/course/1" },
      { title: "第一节 《互联网平台企业涉税信息报送规定》释疑", link: "/course/1" },
      { title: "（一）直播平台责任与义务", link: "/course/2" },
      { title: "（二）直播经纪公司的责任与义务", link: "/course/3" },
      { title: "（三）网络主播的责任与义务", link: "/course/4" },
      { title: "（四）违反《规定》的处罚标准", link: "/course/5" },
      { title: "第二节 “智慧税务”对网络主播涉税的智能监管方法", link: "/course/6" },
      { title: "（一）“智慧税务”对网络主播涉税智能监管的内容（指标）", link: "/course/7" },
      { title: "（二）“智慧税务”对网络主播智能涉税监管的主要方式", link: "/course/6" },
      { title: "（三）网络主播及其经纪公司应对涉税智能监管的方法", link: "/course/7" },
      { title: "（四）网络主播及其经纪公司涉税违规违法智能风险预警监管", link: "/course/6" },
      { title: "（1）红色预警 （2）黄色预警 （3）蓝色预警（4）绿色状态", link: "/course/7" },
    ],
  },
    {
      name: "袁森庚 主讲",
      title: "著名税务律师、原国家税务总局税务干部学院教授",
      title2: "第四章 网络主播涉税违法典型案例分析",
      image: "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749624279192.jpg",
      expertise: ["税务诉讼", "税法教学", "行政执法", "刑事辩护"],
      courses: [
        // { title: "第一章 网络主播涉税政策解读", link: "/course/1" },
        { title: "第一节 隐匿收入偷税案分析（薇娅、田小龙、余洋、王子柏税案）", link: "/course/2" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第二节 虚构业务转换收入性质偷税案分析（薇娅、朱宸慧、林珊珊、金茜茜税案）", link: "/course/3" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第三节 网络主播的税收优惠第三节 分拆收入偷税案分析（某抖音商于某税案）", link: "/course/4" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第四节 拒不申报偷税案分析（吴川、单亚辉税案）", link: "/course/5" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
       
      ],
      courses1: [
        // { title: "第一章 网络主播涉税政策解读", link: "/course/1" },
        { title: "第五节 直播活动无偿赠送未视作销售偷税（敦化市**传媒有限公司税案）", link: "/course/6" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第六节 接受虚开发票案分析（齐齐哈尔亿线文化传媒有限公司税案、怀化欢乐星娱网络科技有限公司税案 ）", link: "/course/7" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第七节 直播平台为他人虚开增值税专用发票案（林某某税案）", link: "/course/5" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第八节 未履行扣缴税款案分析（新津区某某服装工作室未税案）", link: "/course/6" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
        { title: "第九节 经纪公司未履行代缴代扣税款案分析（司马南偷税案）", link: "/course/7" },
        { title: "（一）案情介绍", link: "/course/2" },
        { title: "（二）法律分析", link: "/course/2" },
        { title: "（三）风险防控", link: "/course/2" },
      ],
  },

];

export default function CoursesPage() {
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = 8;
  const totalPages = Math.ceil(teachers.length / itemsPerPage);

  const nextPage = () => {
    setCurrentPage((prev) => (prev + 1) % totalPages);
  };

  const prevPage = () => {
    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
  };

  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">课程预览</h1>
      <div className="overflow-hidden">
        <div
          className="flex transition-transform duration-500 ease-in-out"
          style={{ transform: `translateX(-${currentPage * 100}%)` }}
        >
          {Array.from({ length: totalPages }).map((_, pageIndex) => (
            <div key={pageIndex} className="w-full flex-shrink-0 grid grid-cols-8 md:grid-cols-1 gap-8">
              {teachers.slice(pageIndex * itemsPerPage, (pageIndex + 1) * itemsPerPage).map((teacher, index) => (
                <div key={index} className="bg-white rounded-lg shadow-sm overflow-hidden relative group">
                  {/* 章节标题 */}
                  <p className="text-2xl text-red-600 font-bold text-center mb-4">{teacher.title2}</p>

                  {/* 图片和个人信息区域 */}
                  <div className="flex">
                    {/* 判断哪位老师，进行图片跟课程列表调换顺序 如果是多个使用||添加 */}
                    {teacher.name === "袁森庚 主讲" ? (
                      <>
                        {/* 课程列表 */}
                        <div className="flex-1 bg-blue-600 text-white p-6 mr-4">
                          <div className="flex space-x-6">
                            {teacher.courses && teacher.courses.length > 0 && (
                              <ul>
                                {teacher.courses.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                            {teacher.courses1 && teacher.courses1.length > 0 && (
                              <ul>
                                {teacher.courses1.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                            {teacher.courses2 && teacher.courses2.length > 0 && (
                              <ul>
                                {teacher.courses2.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                          </div>
                        </div>

                        {/* 图片区域 */}
                        <div className="relative w-[300px] h-[300px] aspect-[1/1]">
                          <Image
                            src={teacher.image || "/placeholder.svg"}
                            alt={teacher.name}
                            fill
                            className="object-cover"
                          />
                          {/* 个人信息区域 */}
                          <div className="p-6 text-center mt-80">
                            <p className="text-primary font-bold mb-4 -mt-8">{teacher.title}</p>
                            <p className="text-xl text-primary font-bold mb-4">{teacher.name}</p>
                            <button
                              className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
                              onClick={() => {
                                alert("点击章节，直接上课");
                              }}
                            >
                              请点击每一个章节,直接上课
                            </button>
                          </div>
                        </div>
                      </>
                    ) : (
                      <>
                        {/* 其他老师的默认布局 */}
                        {/* 图片区域 */}
                        <div className="relative w-[300px] h-[300px] aspect-[1/1]">
                          <Image
                            src={teacher.image || "/placeholder.svg"}
                            alt={teacher.name}
                            fill
                            className="object-cover"
                          />
                          {/* 个人信息区域 */}
                          <div className="p-6 text-center mt-80">
                            <p className="text-primary font-bold mb-4 -mt-8">{teacher.title}</p>
                            <p className="text-xl text-primary font-bold mb-4">{teacher.name}</p>
                            <button
                              className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
                              onClick={() => {
                                alert("点击章节，直接上课");
                              }}
                            >
                              请点击每一个章节,直接上课
                            </button>
                          </div>
                        </div>

                        {/* 课程列表 */}
                        <div className="flex-1 bg-blue-600 text-white p-6 ml-4">
                          <div className="flex space-x-6">
                            {teacher.courses && teacher.courses.length > 0 && (
                              <ul>
                                {teacher.courses.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                            {teacher.courses1 && teacher.courses1.length > 0 && (
                              <ul>
                                {teacher.courses1.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                            {teacher.courses2 && teacher.courses2.length > 0 && (
                              <ul>
                                {teacher.courses2.map((course, i) => (
                                  <li key={i} className="mb-2">
                                    <a
                                      href={course.link}
                                      className="text-white hover:underline"
                                      onClick={(e) => {
                                        e.preventDefault();
                                        window.location.href = course.link;
                                      }}
                                    >
                                      {course.title}
                                    </a>
                                  </li>
                                ))}
                              </ul>
                            )}
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}